<template>
    <div class="xunjingwendao1">
        <Navbar />
        <div class="main container">
            <div class="content_address" v-if="addRessList.length > 0">
                <div style="font-size:16px;font-weight:800">我的收货地址</div>
                <div style="font-size:14px;margin-top:15px;color:#50607a">常用地址</div>
                <el-button type="primary" @click="add" style="float:right"> 新增</el-button>
                <el-table :data="addRessList" style="width: 100%">
                    <el-table-column prop="userName" label="姓名">
                    </el-table-column>
                    <el-table-column prop="telNum" label="联系方式">
                    </el-table-column>
                    <el-table-column prop="address" label="所在地区">
                        <template slot-scope="scope">
                            {{ scope.row.provinceName }} {{ scope.row.cityName }} {{ scope.row.countyName }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="detailInfo" label="详细地址">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" @click="edit(scope.row)">编辑</el-button>
                            <el-button type="text" @click="del(scope.row)">删除</el-button>
                            <el-button type="text" @click="defaultIS(scope.row)"
                                v-if="scope.row.isDefault == 0">设为默认</el-button>
                            <span class="mrdz" v-if="scope.row.isDefault == 1">默认地址</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="form.userName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮编" :label-width="formLabelWidth">
                    <el-input v-model="form.postalCode" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="联系方式" :label-width="formLabelWidth">
                    <el-input v-model="form.telNum" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所在地区" :label-width="formLabelWidth">
                    <v-distpicker @selected="onSelected"></v-distpicker>
                </el-form-item>
                <el-form-item label="详细地址" :label-width="formLabelWidth">
                    <el-input v-model="form.detailInfo" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否默认" :label-width="formLabelWidth">
                    <el-switch v-model="form.isDefault"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { useraddress, useraddressDel, useraddressAdd } from '@/api/index'
import VDistpicker from 'v-distpicker'
export default {
    components: {

        VDistpicker
    },
    data() {
        return {
            formLabelWidth: '120px',
            pageNum: 1,
            form: { userName: "", postalCode: "", provinceName: "", cityName: "", countyName: "", detailInfo: "", telNum: "", isDefault: false },
            isSelect: false,
            pageSize: 1000,
            dialogFormVisible: false,
            column: 3,
            postalCode: "",
            pageType: '',

            editType: 'edit',




            addRessList: [


            ]
        };
    },

    mounted(e) {
        this.addressList()
    },
    methods: {

        add() {
            this.form = { name: "", postalCode: "", provinceName: "", cityName: "", countyName: "", detailInfo: "", telNum: "", isDefault: 1 }
            this.dialogFormVisible = true;
            this.pageType = 'add';
        },
        onSelected(val) {
            console.log(val)
            this.form.provinceName = val.province.value
            this.form.cityName = val.city.value
            this.form.countyName = val.area.value

        },
        addressList() {
            useraddress({ pageNum: this.pageNum, pageSize: this.pageSize }).then((res) => {
                console.log(res)
                let data = res.data.records;

                this.addRessList = data;
            })
        },
        edit(row) {

            this.form = JSON.parse(JSON.stringify(row))
            this.form.isDefault = row.isDefault == 1 ? true : false;
            this.pageType = 'edit';
            this.dialogFormVisible = true;


        },
        submit() {
            console.log(this.form)
            let data = {
                userName: this.form.userName,
                postalCode: this.form.postalCode,
                provinceName: this.form.provinceName,
                cityName: this.form.cityName,
                countyName: this.form.countyName,
                detailInfo: this.form.detailInfo,
                telNum: this.form.telNum,
                isDefault: this.form.isDefault,
            }
            if (this.pageType == 'edit') {
                data['id'] = this.form.id;
            }
            if (!this.form.userName) {
                this.$message({
                    type: 'warning',
                    message: '请输入姓名'
                })
                return;
            }
            if (!this.form.telNum) {
                this.$message({
                    type: 'warning',
                    message: '请输入联系方式'
                })
                return;
            }
            if (!this.form.provinceName) {
                this.$message({
                    type: 'warning',
                    message: '请选择所在地区'
                })
                return;
            }
            if (!this.form.detailInfo) {
                this.$message({
                    type: 'warning',
                    message: '请输入详细地址'
                })
                return;
            }
            if (this.form.isDefault) {
                data['isDefault'] = 1;
            } else {
                data['isDefault'] = 0;

            }

            useraddressAdd(data).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    this.addressList()
                    this.dialogFormVisible = false;
                }
            })

        },
        defaultIS(row) {
            this.$confirm('是否设为默认地址', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.form = JSON.parse(JSON.stringify(row))
                this.form.isDefault = 1;
                useraddressAdd(this.form).then((res) => {
                    console.log(res)
                    if (res.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '设置成功'
                        })
                        this.addressList()

                    }
                })
            })
        },
        del(row) {

            useraddressDel(row.id).then((res) => {
                console.log(res)
                if (res.code == 200) {
                    this.addressList()

                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                }
            })




        },

        select(row) {
            //是否需要返回地址(从订单确认页跳过来选收货地址)
            if (!this.isSelect) {
                return;
            }

        }
    }
}
</script>

<style lang="scss">
.mrdz {

    min-width: 80px;
    height: 14px;
    line-height: 14px;
    background-color: #ffeee6;
    border-radius: 4px;
    font-family: PingFangSC;
    font-weight: 600;
    font-size: 10px;
    color: #ff5000;
    letter-spacing: 0;
    text-align: center;
    margin-left: 10px;
}
</style>
